<script setup lang="ts">
import type { PropType } from 'vue';

import { IconifyIcon } from '@vben/icons';
import { $t } from '@vben/locales';

import { Input } from 'ant-design-vue';

const icon = defineModel('value', {
  default: undefined,
  type: String as PropType<string | undefined>,
});
</script>

<template>
  <Input v-model:value="icon">
    <template #addonBefore>
      <a-button>
        <div class="flex items-center gap-[4px]">
          <IconifyIcon :icon="icon as string" class="size-6" />
        </div>
      </a-button>
    </template>
    <template #addonAfter>
      <a-button>
        <div class="flex items-center gap-[4px]">
          <a href="https://icon-sets.iconify.design/" target="_blank">
            {{ $t('ui.icon.searchIcon') }}
          </a>
        </div>
      </a-button>
    </template>
  </Input>
</template>

<style lang="scss" scoped>
:deep(.ant-input-group-addon) {
  padding: 0;
  border: none;

  &:first-child .ant-btn-default {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  &:last-child .ant-btn-default {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
</style>
